<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>企业管理系统 - 首页</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
  <link rel="stylesheet" href="css/index.css">
  <link rel="stylesheet" href="css/user.css">
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <!-- 引入jQuery -->

</head>
<body>
<!-- 侧边栏 -->
<div class="sidebar">
  <div class="sidebar-header">
    <h3>企业管理系统</h3>
    <p>v2.0.0</p>
  </div>
  <ul class="sidebar-menu">
    <li><a href="#" class="active"><i class="fas fa-home"></i> 首页</a></li>
    <li><a href="#"><i class="fas fa-users"></i> 用户管理</a></li>
    <li><a href="#"><i class="fas fa-box"></i> 产品管理</a></li>
    <li><a href="#"><i class="fas fa-shopping-cart"></i> 订单管理</a></li>
    <li><a href="#"><i class="fas fa-chart-line"></i> 数据分析</a></li>
    <li><a href="#"><i class="fas fa-cog"></i> 系统设置</a></li>
    <li><a href="#"><i class="fas fa-file-alt"></i> 报表中心</a></li>
    <li><a href="#"><i class="fas fa-calendar-alt"></i> 日程安排</a></li>
    <li><a href="#"><i class="fas fa-envelope"></i> 消息中心</a></li>
  </ul>
</div>

<!-- 主内容区 -->
<div class="main-content">
  <!-- 顶部导航栏 -->
  <div class="top-navbar">
    <div class="search-box">
      <input type="text" placeholder="搜索...">
      <button><i class="fas fa-search"></i></button>
    </div>
    <div class="user-menu">
      <div class="notification">
        <i class="fas fa-bell"></i>
        <span class="badge">5</span>
      </div>
      <div class="user-profile">
        <img src="img/a.jpg" alt="用户头像">
        <span>管理员</span>
      </div>
    </div>
  </div>

  <!-- 内容区域 -->
  <div class="content-wrapper">
    <!-- 页面标题和面包屑 -->
    <div class="page-header">
      <h2>控制面板</h2>
      <ul class="breadcrumb">
        <li><a href="#">首页</a></li>
        <li>控制面板</li>
      </ul>
    </div>

    <!-- 统计卡片 -->
    <div class="stats-cards">
      <div class="stat-card primary">
        <i class="fas fa-users"></i>
        <div class="info">
          <h3>1,254</h3>
          <p>用户总数</p>
        </div>
      </div>
      <div class="stat-card success">
        <i class="fas fa-shopping-cart"></i>
        <div class="info">
          <h3>524</h3>
          <p>今日订单</p>
        </div>
      </div>
      <div class="stat-card warning">
        <i class="fas fa-dollar-sign"></i>
        <div class="info">
          <h3>¥86,540</h3>
          <p>今日销售额</p>
        </div>
      </div>
      <div class="stat-card danger">
        <i class="fas fa-chart-line"></i>
        <div class="info">
          <h3>32.8%</h3>
          <p>转化率</p>
        </div>
      </div>
    </div>

    <!-- 图表区域 -->
    <div class="chart-row">
      <div class="card">
        <div class="card-header">
          <h3>销售趋势</h3>
          <div>
            <select style="padding: 5px; border: 1px solid #ddd; border-radius: 3px;">
              <option>最近7天</option>
              <option>最近30天</option>
              <option>最近90天</option>
            </select>
          </div>
        </div>
        <div class="card-body">
          <!-- 这里放置图表，实际项目中可以使用ECharts或Chart.js -->
          <div style="height: 300px; background-color: #f9f9f9; display: flex; align-items: center; justify-content: center;">
            [销售趋势图表区域]
          </div>
        </div>
      </div>

      <div class="card">
        <div class="card-header">
          <h3>销售渠道分布</h3>
        </div>
        <div class="card-body">
          <!-- 这里放置饼图 -->
          <div style="height: 300px; background-color: #f9f9f9; display: flex; align-items: center; justify-content: center;">
            [销售渠道饼图区域]
          </div>
        </div>
      </div>
    </div>

    <!-- 最近活动和待办事项 -->
    <div class="chart-row">
      <div class="card">
        <div class="card-header">
          <h3>最近活动</h3>
          <a href="#" style="font-size: 12px;">查看全部</a>
        </div>
        <div class="card-body">
          <ul class="activity-list">
            <li class="activity-item">
              <div class="activity-icon">
                <i class="fas fa-user-plus"></i>
              </div>
              <div class="activity-content">
                <h4>新用户注册</h4>
                <p>用户 "张三" 刚刚注册了账户</p>
              </div>
              <div class="activity-time">10分钟前</div>
            </li>
            <li class="activity-item">
              <div class="activity-icon">
                <i class="fas fa-shopping-cart"></i>
              </div>
              <div class="activity-content">
                <h4>新订单创建</h4>
                <p>订单 #ORD-2023-0567 已创建</p>
              </div>
              <div class="activity-time">25分钟前</div>
            </li>
            <li class="activity-item">
              <div class="activity-icon">
                <i class="fas fa-check-circle"></i>
              </div>
              <div class="activity-content">
                <h4>任务完成</h4>
                <p>"产品页面改版" 任务已完成</p>
              </div>
              <div class="activity-time">1小时前</div>
            </li>
            <li class="activity-item">
              <div class="activity-icon">
                <i class="fas fa-comment"></i>
              </div>
              <div class="activity-content">
                <h4>新评论</h4>
                <p>用户 "李四" 在产品 #P-1002 发表了评论</p>
              </div>
              <div class="activity-time">2小时前</div>
            </li>
          </ul>
        </div>
      </div>

      <div class="card">
        <div class="card-header">
          <h3>待办事项</h3>
          <a href="#" style="font-size: 12px;">添加新任务</a>
        </div>
        <div class="card-body">
          <div style="margin-bottom: 15px;">
            <input type="text" placeholder="添加新任务..." style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 3px;">
          </div>
          <ul style="list-style: none;">
            <li style="padding: 10px 0; border-bottom: 1px solid #eee; display: flex; align-items: center;">
              <input type="checkbox" style="margin-right: 10px;">
              <span>完成月度销售报告</span>
            </li>
            <li style="padding: 10px 0; border-bottom: 1px solid #eee; display: flex; align-items: center;">
              <input type="checkbox" style="margin-right: 10px;">
              <span>联系重要客户</span>
            </li>
            <li style="padding: 10px 0; border-bottom: 1px solid #eee; display: flex; align-items: center;">
              <input type="checkbox" style="margin-right: 10px;">
              <span>更新产品目录</span>
            </li>
            <li style="padding: 10px 0; border-bottom: 1px solid #eee; display: flex; align-items: center;">
              <input type="checkbox" style="margin-right: 10px;">
              <span>准备团队会议材料</span>
            </li>
            <li style="padding: 10px 0; display: flex; align-items: center;">
              <input type="checkbox" style="margin-right: 10px;">
              <span>检查系统更新</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
  // 这里可以添加交互逻辑
  document.addEventListener('DOMContentLoaded', function() {
    // 模拟图表数据加载
    //console.log('页面加载完成');

    // 可以在这里初始化图表
    // 实际项目中可以使用ECharts或Chart.js
  });

</script>
<script type="module" src="js/main.js"></script> <!-- 引入主JS文件 -->

</body>
</html>